<template>
	<div class="match">
		<cmp-crumb :list="crumb"></cmp-crumb>
		<!-- <div class="lesson-form">
			<el-form :inline="true" :model="params" class="demo-form-inline">
				<el-form-item label="按类型">
					<el-select size="small" v-model="params.tagId" placeholder="请选择类型" @change="selectchange">
						<el-option label="全部" value=""></el-option>
						<el-option label="模拟赛" value="1"></el-option>
						<el-option label="选拔赛" value="2"></el-option>
						<el-option label="省赛" value="3"></el-option>
						<el-option label="国赛" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="按热度">
					<el-select size="small" v-model="params.orderby" placeholder="请选择类型" @change="selectchange">
						<el-option label="最新" value="最新"></el-option>
						<el-option label="最热" value="最热"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="search">
				<el-input placeholder="请输入关键字检索" suffix-icon="el-icon-search" v-model="queryStr"
					@keyup.enter.native="selectchange">
				</el-input>
			</div>
		</div> -->
		<div class="match-list" v-if="list && list.length != 0">
			<div class="member-item" @click="goPage('/MemberDetails', {id: item.recId})" v-for="(item,index) in list">
				<div class="member-img">
					<el-image style="width: 100%; height: 100%" :src="item.coverPhoto" fit="cover">
						<div slot="error" class="image-slot">
							<img src="../assets/img/no_img2.png" alt="" />
						</div>
					</el-image>
				</div>
				<div class="member-title">{{item.name}}</div>
				<div class="member-address">{{item.address}}</div>
			</div>
			<div class="page-cont">
				<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
					:total="total" @current-change="pageNumChange">
				</el-pagination>
			</div>
		</div>
		<div class="match-list" v-else>
			<el-empty description="暂无竞赛信息"></el-empty>
		</div>
	</div>
</template>

<script>
	import {
		getMemberListApi
	} from '@/api/home.js'
	import cmpCrumb from '@/components/cmp-crumb'
	export default {
		data() {
			return {
				crumb: [{
					title: '主页',
					url: '/'
				}, {
					title: '成员馆风采列表',
					url: '/Member'
				}],
				token: this.$store.state.app.token || this.$cookies.get('sy_token'),
				articleId: 2356,
				tags: [],
				params: {
					// tagId: '',
					// categoryId: '',
					// orderby: '最新'
				},
				queryStr: '',
				total: 0,
				list: [],
				pageNum: 1,
				pageSize: 8,
				selectItem: null
			}
		},
		created() {
			this.getList()
		},
		methods: {
			goPage(url, query) {
				this.$router.push({
					path: url,
					query: query
				})
			},
			selectchange() {
				this.pageNum = 1
				this.getList()
			},

			application(item) {
				if (!this.token) {
					this.$confirm('您还未登陆，没有权限，请登陆后重试！', '提示', {
						confirmButtonText: '去登陆',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$router.push('/Login')
					}).catch(() => {});
				}
				this.selectItem = item
				this.$confirm('确定参加' + item.title + '吗？', '提示', {
					confirmButtonText: '参加',
					cancelButtonText: '取消',
				}).then(() => {
					setTimeout(() => {
						this.applicationFn()
					}, 500)

				}).catch(() => {

				});
			},
			applicationFn() {
				playCompetitionApi({
					competitionID: this.selectItem.recId
				}).then(res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
					}
				})
			},
			getTags() {
				getArticleTagApi({
					menuid: this.articleId
				}).then(res => {
					let list = res.data,
						obj = {
							"recId": '',
							"tagName": "全部",
						}
					list.unshift(obj)
					this.tags = list
				})
			},
			getList() {
				// let obj = this.params
				// obj.queryStr = this.queryStr
				// obj.pageNum = this.pageNum
				// obj.pageSize = this.pageSize
				getMemberListApi({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
			pageNumChange(index) {
				this.pageNum = index
				this.getList()
			}
		},
		components: {
			cmpCrumb
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.match {
		background-color: #F7F7F7;
		min-height: calc(100vh - 120px);

		.lesson-form {
			margin: 16px auto;
			width: @contWidth;
			display: flex;
			justify-content: space-between;
			padding: 20px 37px;
			background: #fff;
			margin-bottom: 26px;
		}

		.el-form-item {
			margin-bottom: 0;
		}

		.el-form-item__content {
			width: 150px;
		}

		.search {
			.el-input__inner {
				border-radius: 18px;
				width: 295px;
				height: 36px;
			}
		}

		.match-list {
			width: @contWidth;
			margin: 20px auto 0;
			padding: 46px 88px;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
		}

		.member-item {
			width: 250px;
			background: #F4F8FF;
			border-radius: 13px;
			margin: 10px 10px 20px;
			padding: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;

			&:hover {
				box-shadow: 4px 0 10px 0 #ccc;
			}

			.member-img {
				width: 100%;
				height: 200px;
				margin-bottom: 20px;
			}

			.member-title {
				font-size: 14px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #000000;
				line-height: 24px;
				text-align: center;
				margin-bottom: 10px;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.member-address {
				font-size: 12px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #858585;
				line-height: 20px;
				text-align: center;

			}
		}

		// .match-item {
		// 	width: 530px;
		// 	height: 278px;
		// 	border-radius: 13px;
		// 	background: #F4F8FF;
		// 	margin-bottom: 37px;
		// 	padding: 22px 30px 28px;
		// 	transition: all 0.5s;

		// 	.match-item-title {
		// 		font-size: 27px;
		// 		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		// 		font-weight: 500;
		// 		color: #333333;
		// 		margin-bottom: 15px;
		// 	}

		// 	.item-time {
		// 		margin-bottom: 20px;
		// 		font-size: 13px;
		// 		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		// 		font-weight: 400;
		// 		color: #666666;
		// 	}

		// 	.item-intro {
		// 		height: 60px;
		// 		margin-bottom: 30px;
		// 		font-size: 13px;
		// 		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		// 		font-weight: 400;
		// 		color: #666666;
		// 		line-height: 17px;
		// 		display: -webkit-box;
		// 		-webkit-box-orient: vertical;
		// 		-webkit-line-clamp: 3;
		// 		overflow: hidden;

		// 		p {
		// 			display: -webkit-box;
		// 			-webkit-box-orient: vertical;
		// 			-webkit-line-clamp: 3;
		// 			overflow: hidden;
		// 		}
		// 	}

		// 	.item-btn {
		// 		width: 103px;
		// 		height: 39px;
		// 		background: #0A8CFF;
		// 		border-radius: 5px;
		// 		display: flex;
		// 		justify-content: center;
		// 		align-items: center;
		// 		font-size: 17px;
		// 		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		// 		font-weight: 500;
		// 		color: #FFFFFF;
		// 		cursor: pointer;
		// 	}

		// 	&:nth-of-type(2n -1) {
		// 		margin-right: 42px;
		// 	}

		// 	&:hover {
		// 		background: #F9F9F9 linear-gradient(180deg, #4162FF 0%, #35CCFF 100%);

		// 		.match-item-title {
		// 			color: #fff;
		// 		}

		// 		.item-time {
		// 			color: #fff;
		// 		}

		// 		.item-intro {
		// 			color: #fff;
		// 		}

		// 		.item-btn {
		// 			background: #FE7C3E;
		// 		}
		// 	}


		// }

		.page-cont {
			width: 100%;
			padding: 38px 0 46px;
			display: flex;
			justify-content: center;
		}

		.el-empty {
			width: 100%;
		}
	}
</style>